<template>  
  <div>  
    <div ref="content" class="content">  
      <!-- 这里是你要转换为 PDF 的内容 -->  
      <div v-for="(page, index) in pages" :key="index" class="page"> 
        <header>  
          <div class="header-title"><b>健璟体检中心</b></div>
          <div class="header-date">
              体检日期：xxxx
          </div>
          <hr>  
        </header> 
        <h2>Page {{ index + 1 }}</h2>  
        <div class="report-container">  
          <!-- 第一页 -->
          <div v-if="index == 0" class="report-info">  
            <h1>健康体检报告单</h1>  
            <p>姓名: {{ userInfo.name }}</p>  
            <p>性别: {{ userInfo.gender }}</p>  
            <p>年龄: {{ userInfo.age }}</p>  
            <p>体检号: {{ userInfo.examNumber }}</p>  
            <p>体检日期: {{ userInfo.examDate }}</p>  
          </div> 
          <!-- 第2页 -->
          <div v-if="index == 1" class="report-info2">  
            <div class="health-checkup-page">  
              <div class="info">
                <p>尊敬的：<span class="placeholder">姓名</span>女士：</p>  
                <p>感谢您来到<span class="placeholder">健璟体检中心</span>进行健康体检！</p>  
                <p>为了增加您对健康体检的认识，我们在此特别向您说明，健康体检检查的目的在于及时、全面地了解自身的健康状况，提高健康保健意识。</p>  
                <p>如果此次检查在正常范围内，只表示您选择的体检项目所反映的身体健康状况。由于体检手段及项目所限，并不能完全排除身体潜在疾病。若有疾病症状出现，请您及时到医院就医。</p>  
                <p>“健康是人生最宝贵的”。不良的生活习惯和行为会损坏您的健康，我们真诚希望您保持科学健康的生活方式，定期接受健康检查。在您最需要的时候请随时与我们联系。欢迎您再次光临<span class="placeholder">健璟体检中心</span></p>  
                <p>祝您,健康快乐！</p>
              </div>  
            </div>   
          </div> 
          <!-- 第3页 -->
          <div class="report-info3" v-if="index == 2">
            <h3>体检项目列表</h3>
            <table border="1">  
              <thead>  
                <tr>  
                  <th>序号</th>  
                  <th>科室</th>
                  <th>项目</th>  
                </tr>  
              </thead>  
              <tbody>  
                <!-- 使用v-for指令动态生成表格行 -->  
                <tr v-for="(item, index) in tableData" :key="index">  
                  <td>{{ index + 1 }}</td> <!-- 序号从1开始 -->  
                  <td>{{ item.department }}</td> <!-- 科室 -->  
                  <td>{{ item.project }}</td> <!-- 项目 -->  
                </tr> 
              </tbody>  
            </table> 
          </div>
        </div>
      </div>
    </div>
    <button @click="downloadPdf">Download PDF</button>  
  </div>  
</template>  
  
<script>  
import html2canvas from 'html2canvas';  
import jsPDF from 'jspdf';  
  
export default {  
  data() {  
    return {  
      pages: [  
        { content: 'This is the content of the first page.' },  
        { content: 'This is the content of the second page.' },  
        { content: 'This is the content of the third page.' },  
        // 添加更多页面内容  
      ],  
      userInfo: {  
        name: '张三',  
        gender: '男',  
        age: 30,  
        examNumber: '20230401001',  
        examDate: '2023-04-01'  
      }, 
      tableData: [  
        { department: '内科', project: '血常规' },  
        { department: '外科', project: '身高体重' },  
        { department: '眼科', project: '视力检查' }, 
      ] 
    };  
  },  
  methods: {  
    async downloadPdf() {  
      const content = this.$refs.content;  
      const pageHeight = 992; // A4 纸高度（纵向）  
      const pageWidth = 595; // A4 纸宽度（纵向）  
      const totalPages = this.pages.length;  
  
      const pdf = new jsPDF({  
        orientation: 'portrait',  
        unit: 'px',  
        format: [pageWidth, pageHeight],  
      });  
  
      for (let i = 0; i < totalPages; i++) {  
        const pageElement = content.querySelector(`.page:nth-child(${i + 1})`);  
        const canvas = await html2canvas(pageElement, { scale: 2 });  
        const imgData = canvas.toDataURL('image/png');  
        const imgProps = pdf.getImageProperties(imgData);  
        const pdfWidth = pageWidth;  
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;  
  
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);  
  
        if (i < totalPages - 1) {  
          pdf.addPage();  
        }  
      }  
  
      pdf.save('generated.pdf');  
    },  
  },  
};  
</script>  
  
<style scoped>  
.content {  
  font-size: 20px;
  display: flex;  
  flex-direction: column;  
}  

.page {  
  break-after: always;  
  page-break-after: always;  
  margin-bottom: 20px; /* 确保每页之间有间距 */  
}  
.placeholder {  
  font-style: italic;  
  color: #888;  
  /* 可以使用 JavaScript 动态替换这些占位符 */  
} 
.report-info2{
  float: left;
}
.health-checkup-page {  
font-family: Arial, sans-serif;  
  margin: 0 auto;  
  padding: 50px;  
  border: 1px solid #ccc;  
  border-radius: 8px;  
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
  text-align: left;
  text-indent: 2em; 
}  
.info{
  margin-top: 50px;
}
.placeholder {  
  font-style: italic;  
  color: #888;  
/* 可以使用 JavaScript 动态替换这些占位符 */  
}  

header {  
  text-align: center;  
  margin-top: 20px;  
  font-size: 0.9em;  
  color: #555;  

}  
header hr{
  color: #555;
  width: 95%;
}
.header-title{
  margin-left: 2.5%;
  font-size: 16px;
  float: left;
  margin-bottom: 10px;

}
.header-date{
  margin-right: 2.5%;
  font-size: 12px;
  float: right;
}
.report-info3{
  margin-left: 5%;

}

table {  
  width: 90%;  
  border-collapse: collapse;  

}  
  
th, td {  
  padding: 8px;  
  text-align: left;  
}  
  
th {  
  background-color: #b0aeae;  
}  

</style>